/*
  学习目标：Link组件和NavLink组件的使用
  区别: 
    0. 都可以用来跳转路径, 跳转语法一致
    1. NavLink 会自带高亮类名active, Link不会
  如何控制NavLink高亮 - 了解即可
    1. 通过activeClassName自定义高亮类名
  两种匹配模式: 💥💥
    1. 模糊匹配: url路径  包含to属性    的值开头
    2. 精准匹配: url路径 完全相同与  to属性的值
  默认匹配模式: 模糊匹配

*/

import React from 'react';
import { BrowserRouter as Router, Route, Link, NavLink } from 'react-router-dom';
import './index.css';

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="root_child">
          <h1>app组件</h1>
          <NavLink
            // activeClassName自定义高亮类名
            activeClassName="xxx"
            to="/home"
            // 精准匹配
            exact
          >
            首页
          </NavLink>
          <br />
          <Link to="/my">我的音乐</Link>
          <br />
          <Link to="/friend">朋友</Link>
          <br />
          <Route path="/home" component={Home} />

          <Route path="/my" component={MyMusic} />
          <Route path="/friend" component={Friend} />
        </div>
      </Router>
    );
  }
}

function Home() {
  return <h1>我是首页组件</h1>;
}

function MyMusic() {
  return <h1>我是我的音乐件</h1>;
}

function Friend() {
  return <h1>我是朋友组件</h1>;
}
